/* 学员信息页面思路分析
1.默认加载学员信息列表 
2.添加学员 ：bootstrap模态框
3.省市县三级联动
4.确认添加 : 发送ajax请求
5.重置添加弹窗
6.删除学员信息
7.修改学员信息

本页面三个难点
难点1 ： 省市县三级联动 逻辑复杂
难点2 ： 表单较多，需要单独封装函数获取参数
难点3 ： 新增和编辑复用一个模态框， 一个按钮实现两种业务
    新增 ： (1)获取表单数据 (2)发送新增ajax请求
    编辑 ： (1)将点击的当前数据渲染到表单上 (2)获取表单数据 (3)发送编辑ajax请求
*/

//查询数据
const getStudent = () => {
    axios({
        url: '/student/list',
        method: 'get',
    }).then(res => {
        //渲染数据
        renderData(res.data.data)
    })
}
/* 封装渲染函数 */
const renderData = arr => {
    document.querySelector('tbody').innerHTML = arr.map(item => `
    <tr>
        <th scope="row">${item.id}</th>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.sex}</td>
        <td>${item.group}</td>
        <td>${item.phone}</td>
        <td>${item.salary}</td>
        <td>${item.truesalary}</td>
        <td>${item.province + item.city + item.county}</td>
        <td>
            <button type="button" class="btn btn-primary btn-sm" data-id="${item.id}">修改</button>
            <button type="button" class="btn btn-danger btn-sm" data-id="${item.id}">删除</button>
        </td>
    </tr> 
    
    `).join('')
}
//调用函数
getStudent()



//2增加数据
//2.1点击添加学员 显示模态框
//2.2点击重置:重置表单(框架自带)
//2.3点击确认:新增学员
// 收集数据  校验数据 发送数据 处理数据

//2.1点击添加学员 显示模态框
document.querySelector('.btnAddStu').addEventListener('click', function () {
    document.querySelector('.addModalLabel').innerText = '录入新成员'
    document.querySelector('.btnAddStudent').innerText = '确认添加'
    //弹出模态框  显示:show  隐藏:hide
    $('#addModal').modal('show')
    document.querySelector('form').reset()
    //加载省
    getProvince()
    //将表单的值清空
    document.querySelector('form').reset()
    document.querySelector('[name="city"]').innerHTML = `<option value="">--市--</option>`
    document.querySelector('[name="county"]').innerHTML = `<option value="">--县--</option>`
})


//模态框三级联动,以此选择
//模态框显示的时候加载省,省下拉change事件里加载市,市下拉change事件里加载县
//加载省
const getProvince = () => {
    axios({
        url: '/geo/province',
        method: 'get',
    }).then(res => {
        //成功回调
        document.querySelector('[name="province"]').innerHTML = `<option value="">--省--</option>` + res.data.map(item => `
              <option value="${item}">${item}</option>  
            `
        ).join('')
    })
}
//加载市 在省change事件里面
document.querySelector('[name="province"]').addEventListener('change', function () {
    //当省改变的时候,县和市就要恢复初始值
    document.querySelector('[name="city"]').innerHTML = `<option value="">--市--</option>`
    document.querySelector('[name="county"]').innerHTML = `<option value="">--县--</option>`
    axios({
        url: '/geo/city',
        method: 'get',
        params: { pname: this.value }
    }).then(res => {
        //成功回调
        document.querySelector('[name="city"]').innerHTML = `<option value="">--市--</option>` + res.data.map(item => `
              <option value="${item}">${item}</option>  
            `
        ).join('')
    })
})
//加载县 在市change事件里面
document.querySelector('[name="city"]').addEventListener('change', function () {
    document.querySelector('[name="county"]').innerHTML = `<option value="">--县--</option>`
    axios({
        url: '/geo/county',
        method: 'get',
        params: {
            pname: document.querySelector('[name="province"]').value,
            cname: this.value
        }
    }).then(res => {
        //成功回调
        document.querySelector('[name="county"]').innerHTML = `<option value="">--县--</option>` + res.data.map(item => `
              <option value="${item}">${item}</option>  
            `
        ).join('')
    })
})

//2.3点击确认:新增学员
document.querySelector('.btnAddStudent').addEventListener('click', function (e) {
    //阻止默认事件
    e.preventDefault()
    const fd = new FormData(document.querySelector('form'))
    const obj = {}
    fd.forEach((item, index) => {
        obj[index] = item
    })
    // 收集数据  校验数据 发送数据 处理数据
    let config = {}
    if (document.querySelector('.btnAddStudent').innerText === '确认添加') {
        config = {
            url: '/student/add',
            method: 'post',
            data: obj
        }
    } else {
        config = {
            url: '/student/update',
            method: 'put',
            data: {
                id: this.dataset.id,
                ...obj
            }
        }
    }
    axios(config).then(res => {
        //成功回调
        if (res.data.code === 0) {
            getStudent()
            //隐藏模态框  显示:show  隐藏:hide
            $('#addModal').modal('hide')
            Toast.success(res.data.message)
        }
    }).catch(err => {
        Toast.fail(err.response.data.message)
    })
})
//修改按钮
document.querySelector('tbody').addEventListener('click', function (e) {
    //阻止默认事件
    e.preventDefault()
    if (e.target.classList.contains('btn-primary')) {
        document.querySelector('.addModalLabel').innerText = '修改成员'
        document.querySelector('.btnAddStudent').innerText = '确认修改'
        //弹出模态框  显示:show  隐藏:hide
        $('#addModal').modal('show')
        //加载省
        getProvince()
        //显示默认内容
        axios({
            url: '/student/one',
            method: 'get',
            params: { id: e.target.dataset.id }
        }).then(res => {
            //成功回调
            const data = res.data.data
            document.querySelector('[name="name"]').value = data.name
            document.querySelector('[name="age"]').value = data.age
            document.querySelector('[name="group"]').value = data.group
            // 性别
            if (data.sex == '男') {
                document.querySelectorAll('[name="sex"]')[0].checked = true
            } else {
                document.querySelectorAll('[name="sex"]')[1].checked = true
            }
            document.querySelector('[name="phone"]').value = data.phone
            document.querySelector('[name="salary"]').value = data.salary
            document.querySelector('[name="truesalary"]').value = data.truesalary
            //省数据在弹窗出现的时候会自动加载，所以 能够直接修改value
            document.querySelector('[name="province"]').value = data.province
            //市和县需要单独渲染
            document.querySelector('[name="city"]').innerHTML = `<option selected value="${data.city}">${data.city}</option>`
            document.querySelector('[name="county"]').innerHTML = `<option selected value="${data.county}">${data.county}</option>`

        })
        //把id传给确认按钮
        document.querySelector('.btnAddStudent').dataset.id = e.target.dataset.id
    } else if (e.target.classList.contains('btn-danger')) {//删除
        //获取id
        const id = e.target.dataset.id
        axios({
            url: '/student/delete',
            method: 'delete',
            params: {
                id
            }
        }).then(res => {
            //成功回调
            console.log(res)
            if (res.data.code === 0) {
                Toast.success(res.data.message)
                //重新查询数据
                getStudent()
            }
        })
    }
})